<template>
    <div class="chart">
        <ul class="user">
            <li class="list">
                <span class="title">总用户数</span>
                <span class="middle">{{user.totlaUser}}</span>
                <span class="bottom">近一小时新增&nbsp;&nbsp;&nbsp;&nbsp;{{user.addTime}}人</span>
            </li>
            <li class="list">
                <span class="title">每日新增用户</span>
                <span class="middle">{{user.addUser}}</span>
                <span class="bottom">日环比&nbsp; <a-icon type="caret-down" style="color:#F5222D;fontSize: '14px',"/>&nbsp; {{user.addTime}}</span>
            </li>
            <li class="list">
                <span class="title">活跃用户</span>
                <span class="middle">{{user.activeUser}}</span>
                <span class="bottom">日活跃用户&nbsp;&nbsp;&nbsp;&nbsp; {{user.dayActive}}人</span>
            </li>
            <li class="list">
                <span class="title">当前在线人数</span>
                <span class="middle">{{user.online}}</span>
                <span class="bottom">历史最高值&nbsp;&nbsp;&nbsp;&nbsp; {{user.max}}人</span>
            </li>
        </ul>
        <ul class="chartsBox">
            <li class="chartList">
                <div class="title">算力情况</div>
                <div class="content">
                    <div  id="pieChart" style="width:350px;height:350px;padding-left:30px;"></div>
                    <ul class="legend">
                        <li class="legendList" v-for="(v,i) of pieData" :key="i">
                            <i class="dot" :style="{background:dotColor[i]}"></i>
                            <span class="item">{{v.name}} </span>
                            <span class="percent">{{v.percent}}</span>
                            <span class="itemNumber">{{v.value}}</span>
                        </li>
                    </ul>
                </div>
               
            </li>
            <li class="chartList">
                <div class="title">算力排行</div>
                <div class="content" id="barChart" style="width:780px;height:350px;margin-left:0;overflow:hidden"></div>
            </li>
        </ul>
        <ul class="number user">
            <li class="list">
                <span class="title">总发行量</span>
                <span class="middle">{{number.amount}}</span>
                <span class="bottom">日发行量&nbsp;&nbsp;&nbsp;&nbsp;{{number.dayNumber}}</span>
            </li>
            <li class="list">
                <span class="title">已挖矿数量</span>
                <span class="middle">{{number.issueNumber}}</span>
                <span class="bottom">总挖矿次数&nbsp;&nbsp;&nbsp;&nbsp;{{number.times}}</span>
            </li>
            <li class="list">
                <span class="title">今日挖矿数量</span>
                <span class="middle">{{number.todayNumber}}</span>
                <span class="bottom">今日挖矿次数&nbsp;&nbsp;&nbsp;&nbsp;{{number.todayTimes}}</span>
            </li>
            <li class="list">
                <span class="title">今日矿工数量</span>
                <span class="middle">{{number.todayMiner}}</span>
                <span class="bottom">近一小时矿工数&nbsp;&nbsp;&nbsp;&nbsp;{{number.nearly}}</span>
            </li>
        </ul>
        <div  class="lineChart"  >
            <div class="title">24小时挖矿检测</div>
            <div id="lineChart" style="width:1700px;height:400px;"></div>
        </div>
    </div>
</template>

<script>
import echarts from "echarts";
export default {
  data() {
    return {
      user: {
        //用户数量
        totlaUser: 10000,
        addTime: 125,
        addUser: 2002,
        rate: "11%",
        activeUser: 20000,
        dayActive: 4550,
        online: 10000,
        max: 140000
      },
      number: {
        //矿产数量
        amount: 253000,
        dayNumber: 13000,
        issueNumber: 253000,
        times: 12301,
        todayNumber: 32651,
        todayTimes: 12450,
        todayMiner: 2301,
        nearly: 15300
      },
      dotColor: [
        "#3aa0ff",
        "#36cbcb",
        "#4dcb73",
        "#fad337",
        "#f2637b",
        "#975fe4"
      ],
      pieOption: {
        tooltip: {
          trigger: "item",
          formatter: "{b}: {c} : {a}({d}%)"
        },
        title: {
          text: "总算力",
          subtext: "2000000.00",
          x: "center",
          y: 140,
          itemGap: 16,
          textStyle: {
            fontSize: 14,
            color: "#0000006d",
            paddig: [200, 0, 0, 0]
          },
          subtextStyle: {
            fontSize: 24,
            color: "#000000d8"
          }
        },
        series: [
          {
            type: "pie",
            color: [
              "#3aa0ff",
              "#36cbcb",
              "#4dcb73",
              "#fad337",
              "#f2637b",
              "#975fe4"
            ],
            radius: ["50%", "70%"],
            avoidLabelOverlap: false,
            itemStyle: {
              //类目样式
              borderColor: "#fff",
              borderWidth: 5
            },
            label: {
              normal: {
                show: false,
                position: "center"
              },
              emphasis: {
                //悬停在类目的时候,中间内容显示
                show: false
              }
            },

            labelLine: {
              //标签的视觉引导线样式

              normal: {
                show: false
              }
            },
            data: []
          }
        ]
      },
      pieData: [
        { value: 335, name: "新手矿工", percent: "20%" },
        { value: 310, name: "初级矿工", percent: "30%" },
        { value: 130, name: "中级矿工", percent: "10%" },
        { value: 150, name: "高级矿工", percent: "22%" },
        { value: 260, name: "资深矿工", percent: "23%" },
        { value: 110, name: "矿产大亨", percent: "12%", selected: true }
      ],
      pie: "",
      bar: "",
      barOption: {
        tooltip: {},
        grid: {
          left: "4%",
          right: "1%",
          bottom: "1%",
          top: "4%",
          containLabel: true
        },
        xAxis: {
          type: "value",
          name: "amount",

          splitLine: {
            show: false
          },
          show: false //隐藏坐标轴
        },
        yAxis: {
          type: "category",
          inverse: true, //y轴倒序排列
          axisLine: {
            //隐藏轴线
            show: false
          },
          axisTick: {
            //隐藏刻度线
            show: false
          },
          splitLine: {
            show: false
          },
          axisLabel: {
            textStyle: {
              //文字样式
              color: "#000000a5",
              fontSize: 14,
              verticalAlign: "middle"
              //   padding: [0, 0,0, 0]
            }
          },
          data: []
        },
        series: [
          {
            // name: "用户id",
            type: "bar",
            sort: "ascending",
            stack: "chart",
            z: 3,
            barWidth: 11, //柱图宽度
            barGap: "40%",
            itemStyle: {
              normal: {
                color: "#93f"
              }
            },
            data: ""
          },
          {
            type: "bar",
            stack: "chart",

            silent: true,
            itemStyle: {
              normal: {
                color: "#eee"
              }
            },
            data: ""
          }
        ]
      },
      line: "",
      lineOption: {
        tooltip:{//鼠标悬浮时
            trigger: 'axis',

        },
        grid: {
          left: "2%",
          right: "8%",
          bottom: "16%",
          top: "8%",
          containLabel: true
        },
        dataZoom: [//显示数据区域缩放
            {
                show: true,
                // realtime: true,
                start: 30,
                end: 85,
                y:360,
                handleIcon  :'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
                handleStyle:{
                    color:'#fff',
                    shadowBlur: 3,
                    shadowColor: 'rgba(0, 0, 0, 0.6)',
                    shadowOffsetX: 2,
                    shadowOffsetY: 2,
                },
            },
        ],
        xAxis: {
          type: "category",
          nameLocation:'start',
          boundaryGap:false,//刻度线与文本对齐
          axisLine:{
              lineStyle:{//设置轴线颜色
                  color: '#ccc',
              }
          },
          axisLabel:{//设置文本颜色
              color:'#333333',
          },
          data: [ "00:00","00:30","01:00","01:30","02:00","02:30","03:00","03:30","04:00","04:30","05:00","05:30",
            "06:00","06:30","07:00","07:30","08:00","08:30","09:00","09:30","10:00","10:30","11:00",
            "11:30","12:00","12:30","13:00","13:30","14:00","14:30","15:00","15:30","16:00","16:30","17:00","17:30","18:00","18:30","19:00","19:30",
            "20:00","20:30", "21:00","21:30", "22:00","22:30","23:00","23:30",
          ]
        },
        yAxis: {
          type: "value",
          axisLine: {
            //隐藏轴线
            show: false
          },
          axisTick: {
            //隐藏刻度线
            show: false
          },
          splitLine:{//设置网格线
               lineStyle:{
                type: 'dashed',
            }   
          }
        },
        series: [
          {
            type: "line",
            showSymbol :false,
            symbol: "circle",//折线点不显示
            data: [820, 932, 901, 934, 1290, 1330, 1320, 1200, 1500,2000,
                    1600,1800,2100,2140,1032,1500,2000,1600,1800,2100,
                    2140,1032,1290, 1330, 1320, 1200,1290, 1330, 1320, 1200,
                    1600,1800,2100,2140,1032,1500,2000,1600,1290, 1330, 1320, 1200, 1500,2000,1290, 1330, 1320, 1200, 1500,2000,],
            itemStyle:{
                normal:{
                    color:'#1890ff',
                    borderColor:'#fff',//设置圆点的border
                    borderWidth:2,
                    lineStyle:{//设置折线颜色
                        color:'#1890ff',
                        
                    }
                }
            },
          }
        ]
      }
    };
  },
  mounted() {
    this.setPie();
    this.setBar();
    this.setLine();
  },
  methods: {
    //设置饼状图
    setPie() {
      this.pie = echarts.init(document.getElementById("pieChart"));
      this.pieOption.series[0].data = this.pieData;
      this.pie.setOption(this.pieOption);
    },
    //设置柱状图
    setBar() {
      this.bar = echarts.init(document.getElementById("barChart"));
      const barData = {
        用户ID1: 10000,
        用户ID2: 9000,
        用户ID3: 8000,
        用户ID4: 7000,
        用户ID5: 6000,
        用户ID6: 5000,
        用户ID7: 4000,
        用户ID8: 3000,
        用户ID9: 2000,
        用户ID10: 1000
      };
      this.barOption.yAxis.data = Object.keys(barData); //设置y轴的值
      //获取x轴的值
      this.barOption.series[0].data = Object.keys(barData).map(function(key) {
        return barData[key];
      });
      let arr = Object.keys(barData).map(function(key) {
        return barData[key];
      });
      let max = "";
      for (let i = 0; i < arr.length; i++) {
        //获取到x轴最大值
        if (arr[i] > max) {
          max = arr[i];
        }
      }
      this.barOption.xAxis.max = max + 2000; //设置x轴最大值
      for (let index of arr.keys()) {
        //获取补全柱形的data
        arr[index] = this.barOption.xAxis.max - arr[index];
      }
      this.barOption.series[1].data = arr;

      this.bar.setOption(this.barOption);
    },
    //设置折线图
    setLine() {
      this.line = echarts.init(document.getElementById("lineChart"));
      this.line.setOption(this.lineOption);
    }
  }
};
</script>

<style scoped lang="less">
.chart {
  height: 100%;
  width: 100%;
  background: rgb(240, 242, 245);
}
//顶部数据展示列表
.user {
  display: flex;
  .list {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #fff;
    margin-right: 30px;
    padding: 20px;
    padding-bottom: 0;
    &:last-of-type {
      margin-right: 0;
    }
    .title {
      color: rgba(0, 0, 0, 0.427);
    }
    .middle {
      color: #000;
      font-size: 30px;
      padding-bottom: 20px;
    }
    .bottom {
      border-top: 1px solid rgba(0, 0, 0, 0.1);
      padding: 8px 0;
    }
  }
}
//中间图标模块
.chartsBox {
  display: flex;
  margin: 30px 0;
  .chartList {
    flex: 1;
    margin-right: 30px;
    background: #fff;
    &:last-of-type {
      margin-right: 0;
    }
    .title {
      padding: 16px 26px;
      font-size: 16px;
      font-weight: 600;
      color: #000000d8;
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }
    .content {
      margin-left: -20px;
      display: flex;
      justify-content: space-between;
      .legend {
        font-size: 14px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-right: 80px;
        .legendList {
          display: flex;
          align-content: center;
          align-items: center;
          padding-bottom: 20px;
          .dot {
            width: 8px;
            height: 8px;
            display: block;
            border-radius: 50%;
          }
          .item {
            padding: 0 12px;
          }
          .percent {
            padding: 0 12px;
            color: #0000006d;
            border-left: 1px solid #0000006d;
          }
          .itemNumber {
            padding-left: 80px;
          }
        }
      }
    }
  }
}
//底部折线图
.lineChart {
  background: #fff;
  margin: 30px 0;
  padding-bottom: 20px;
  .title {
    font-size: 16px;
    font-weight: 600;
    line-height: 60px;
    padding-left: 20px;
    border-bottom: 1px solid #e9e9e9;
  }
}
</style>

